const template_floor_style_3 = `
<div class="floor-style-3">
    <!-- 楼层标题 -->
    <floor-title :title='title' :subTitle='subTitle' :link='titleLink'  @change="handleTitleChanged"></floor-title>

    <!-- 楼层内容区 -->
    <div class="floor-content">
        <div class="floor-item" v-for="item in links.cargos" :key="item.sku_id" @click='setSelectCargos'>
            <sku-item :sku-id="item.sku_id"></sku-item>
        </div>
        
        <div class="floor-item" v-if="!links.cargos.length" v-for="item in 15" :key="item" @click='setSelectCargos'>
            <sku-item :sku-id="0"></sku-item>
        </div>

    </div>
    <!-- 页面弹出框 -->
    <div>
        <goods-searcher :visible="dialogVisible.cargos" :maxselect="15" @visible-change="handleGoodsSearchVisibleChange" @change="handleSelectedGoodsChange" />
    </div>
</div>
`

Vue.component('floor_style_3', {
    props: {
        config: {
            type: Object,
            required: true,
        },
    },
    data: function () {
        return {
            dialogVisible: { cargos: false },
            links: {
                cargos: [],
            },
            title: '3F',
            subTitle: 'NiuShop',
            titleLink: {
                url: '',
                content: '查看更多',
            },
        }
    },
    mounted() { },
    methods: {
        setSelectCargos() {
            this.dialogVisible.cargos = true
        },
        handleSelectedGoodsChange(goods) {
            this.links.cargos = goods.map(item => {
                return { sku_id: item.sku_id }
            })

            return this.onConfigChanged()
        },
        handleGoodsSearchVisibleChange(visible) {
            this.dialogVisible.cargos = visible
        },
        handleTitleChanged(ojb) {
            const { title, subTitle, link } = ojb
            this.title = title
            this.subTitle = subTitle
            this.titleLink = link
            this.onConfigChanged()
        },
        // 配置修改设置
        onConfigChanged() {
            console.log(this.titleLink)
            const settings = {
                title: this.title,
                subTitle: this.subTitle,
                rightCargos: [],
                titleLink: this.titleLink,
            }

            console.log(settings)

            if (this.links.cargos && this.links.cargos.length > 0) {
                settings.rightCargos = this.links.cargos.map(item => {
                    return { sku_id: item.sku_id }
                })
            }

            this.$emit('config-change', settings)
        },
    },
    watch: {
        config: function (curr) {
            this.links.cargos = curr.rightCargos || []
            this.links.cargos = this.links.cargos.map(item => {
                return { sku_id: item.sku_id }
            })
            this.title = curr.title || '2F'
            this.subTitle = curr.subTitle || 'NiuShop&NiuCloud'
            this.titleLink = curr.titleLink || {}
        },
    },
    template: template_floor_style_3,
})
